@import "../../../../style/val.scss";
.bill-home-page {
	min-height: 70vh;
	background: url("../../../../images/imageXHF/xhf_index_bg.png") no-repeat;
	background-size: 100% 40%;
}
.modal-jine {
	p {
		color: #333333;
		font-size: 0.28rem;
		display: flex;
		justify-content: flex-start;
		.title {
			display: block;
			width: 2.5rem;
			margin: 0rem;
			text-align: right;
		}
		.num {
		}
	}
}
.bill-home-container {
	padding-top: 0rem;
	padding-bottom: 2rem;
	// background: #fff;
	padding-top: 1rem;
	.bill-info-box {
		width: 6.9rem;
		min-height: 4.8rem;
		border-radius: 0.2rem;
		box-shadow: 0rem 0.1rem 0.3rem 0rem #e0dada;
		margin: 0 auto;
		background: #fff;
		box-sizing: border-box;
		position: relative;
		.bill-tab-top {
			width: 6.9rem;
			height: 1.14rem;
			background: #ffeeef;
			border-top-right-radius: 0.2rem;
			border-top-left-radius: 0.2rem;
			display: flex;
			justify-content: space-around;
			align-items: center;
			.lable {
				font-size: 0.32rem;
				color: #333333;
				font-weight: 600;
			}
			.select-lable {
				color: #f82633 !important;
			}
			.shu {
				width: 0.04rem;
				height: 0.62rem;
				background: #ffc7c7;
			}
		}
		.bill-info-bot-left {
			min-height: 2rem;
			width: 6.9rem;
			background: #fff;
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			.bot-item {
				width: 50%;
				height: 100%;
				padding-left: 0.68rem;
				padding-top: 0.62rem;
				padding-right: 0.1rem;
				box-sizing: border-box;
				.bot-title {
					color: #666666;
					font-size: 0.28rem;
					position: relative;
					.zuidi-tip {
						background: #bfbfbf;
						text-align: center;
						position: absolute;
						width: 1.1rem;
						height: 0.32rem;
						right: 0.03rem;
						top: -0.16rem;
						color: #fff;
						font-size: 0.2rem;
						line-height: 0.32rem;
						border-radius: 0.16rem 0.16rem 0.16rem 0;
					}
					.yuqi-tip {
						background: #f82633;
						text-align: center;
						position: absolute;
						width: 0.78rem;
						height: 0.32rem;
						right: 0.3rem;
						top: -0.16rem;
						color: #fff;
						font-size: 0.2rem;
						line-height: 0.32rem;
						border-radius: 0.16rem 0.16rem 0.16rem 0;
					}
				}
				.bot-number {
					color: #333333;
					font-size: 0.4rem;
					font-weight: 700;
					margin-top: 0.1rem;
					margin-bottom: 0.2rem;
				}
				.bot-desc {
					color: #999999;
					font-size: 0.24rem;
					img {
						width: 0.2rem;
						height: 0.2rem;
						margin-left: 0.1rem;
					}
				}
			}
		}
		.bill-info-bot-right {
			min-height: 2rem;
			width: 6.9rem;
			background: #fff;
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			.bot-item {
				height: 100%;
				width: 50%;
				padding-left: 0.68rem;
				padding-top: 0.62rem;
				padding-right: 0.1rem;
				box-sizing: border-box;
				.bot-title {
					color: #666666;
					font-size: 0.28rem;
					position: relative;
					.zuidi-tip {
						background: #bfbfbf;
						text-align: center;
						position: absolute;
						width: 1.1rem;
						height: 0.32rem;
						right: 0.03rem;
						top: -0.16rem;
						color: #fff;
						font-size: 0.2rem;
						line-height: 0.32rem;
						border-radius: 0.16rem 0.16rem 0.16rem 0;
					}
					.yuqi-tip {
						background: #f82633;
						text-align: center;
						position: absolute;
						width: 0.78rem;
						height: 0.32rem;
						right: 0.3rem;
						top: -0.16rem;
						color: #fff;
						font-size: 0.2rem;
						line-height: 0.32rem;
						border-radius: 0.16rem 0.16rem 0.16rem 0;
					}
				}
				.bot-number {
					color: #333333;
					font-size: 0.4rem;
					font-weight: 700;
					margin-top: 0.1rem;
					margin-bottom: 0.2rem;
				}
				.bot-desc {
					color: #999999;
					font-size: 0.24rem;
					margin-bottom: 0.03rem;
					img {
						width: 0.2rem;
						height: 0.2rem;
						margin-left: 0.1rem;
					}
				}
			}
		}
		.bill-btns {
			height: 1.66rem;
			width: 6.9rem;
			border-bottom-right-radius: 0.2rem;
			border-bottom-left-radius: 0.2rem;
			display: flex;
			justify-content: space-around;
			align-items: center;
			.one-btn {
				width: 5.8rem;
				height: 0.6rem;
				background: #ffeeef;
				font-size: 0.24rem;
				color: #f82633;
				text-align: center;
				line-height: 0.6rem;
				position: relative;
			}
			.one-btn-tip {
				background: #f82633;
				text-align: center;
				position: absolute;
				width: 0.78rem;
				height: 0.32rem;
				right: -0.2rem;
				top: -0.16rem;
				color: #fff;
				font-size: 0.2rem;
				line-height: 0.32rem;
				border-radius: 0.16rem 0.16rem 0.16rem 0;
			}
			.btn {
				width: 1.8rem;
				height: 0.6rem;
				background: #ffeeef;
				font-size: 0.24rem;
				color: #f82633;
				text-align: center;
				line-height: 0.6rem;
				position: relative;
			}
			.btn-tip {
				background: #f82633;
				text-align: center;
				position: absolute;
				width: 0.78rem;
				height: 0.32rem;
				right: -0.2rem;
				top: -0.16rem;
				color: #fff;
				font-size: 0.2rem;
				line-height: 0.32rem;
				border-radius: 0.16rem 0.16rem 0.16rem 0;
			}
		}
		.huank-time {
			color: #aaaaaa;
			font-size: 0.24rem;
			text-align: center;
			width: 100%;
			position: absolute;
			bottom: 0.2rem;
		}
	}
	.code {
		margin-top: 0.2rem;
	}
	.space {
		height: 10px;
		background-color: #f6f6f6;
	}
	.no-remind {
		font-size: 0.3rem;
		color: #888888;
		text-align: center;
		padding: 1.36rem 0;
		background-color: #f6f6f6;
	}

	.title-box {
		height: 0.86rem;
		margin-top: 0.4rem;
		border-bottom: 1px solid #e3e3e3;
		background-color: #f6f6f6;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 0.3rem;
		.title {
			color: #030303;
			line-height: 0.9rem;
			font-weight: 700;
			font-size: 0.3rem;
		}
		.more {
			color: #666666;
			font-size: 0.28rem;
		}
	}

	.btn-bottom {
		width: 100%;
		height: 1.8rem;
		text-align: center;
		font-size: 0.32rem;
		color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #f6f6f6;
		.time-text {
			color: #333333;
			font-size: 0.24rem;
		}
		.btn-box {
			width: 100%;
			height: 1.4rem;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-around;
		}
		.btn-item {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			margin: 0 0.2rem;

			.btn-item-1 {
				display: inline;
				font-size: 0.32rem;
			}

			.btn-item-2 {
				display: inline;
				font-size: 0.24rem;
			}
		}
		.btn-item {
			border-radius: 0.44rem;
		}

		.btn-1 {
			height: 0.9rem;
			border: 0.02rem solid $color-main-green;
			color: $color-main-green;
		}

		.btn-2 {
			height: 0.9rem;

			background-color: $color-main-green;
			border: 0.02rem solid $color-main-green;
			color: #fff;
		}
	}
	.submit-btn {
		display: block;
		height: 0.99rem;
		font-size: 0.34rem;
		color: #fff;
		width: 5.94rem;
		margin-top: 0.15rem;
		margin-left: 0.77rem;
		text-align: center;
		line-height: 0.99rem;
		border-radius: 7px;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		justify-content: center;
		background-color: $color-main-green;
	}
	.banner-box {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: 0.2rem;
		// position: fixed;
		// bottom: 0.2rem;
		// left: 0.25rem;
		img {
			width: 7rem;
			height: 2.2rem;
			border-radius: 0.2rem;
		}
	}
}
